<template>
  <div class="app-container">
    <!--工具条-->
    <el-form :inline="true" :model="filters" size="small">
      <el-form-item label="选择日期">
        <el-date-picker
          v-model="filters.date"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button-group>
          <el-button :class="{active: timeType === 1}" :autofocus="true" type="plain" @click="switchType(1)" style="width: 80px">本周</el-button>
          <el-button :class="{active: timeType === 2}" type="plain" @click="switchType(2)">最近30天</el-button>
          <el-button :class="{active: timeType === 3}" type="plain" @click="switchType(3)">最近60天</el-button>
        </el-button-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="toQuery">查询</el-button>
        <el-button type="success" icon="el-icon-download" @click="exportReport">导出报表</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="listLoading" :data="data" highlight-current-row :summary-method="getSummaries" show-summary>
      <el-table-column type="index" label="序号" width="55">
        <template slot-scope="scope">
          <span>{{ scope.$index+(page - 1) * size + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日期">
        <template slot-scope="scope">
          {{ scope.row.since | formatDate('yyyy-MM-dd') }}
        </template>
      </el-table-column>
      <el-table-column prop="clueCount" label="新增线索"/>
      <el-table-column prop="callCount" label="已拜访数"/>
      <el-table-column prop="listenCount" label="试听课数"/>
      <el-table-column prop="listenAttendCount" label="试听课人数"/>
      <el-table-column prop="listenOrder" label="试听课单数"/>
      <el-table-column prop="walkInOrder" label="上门单数"/>
      <el-table-column prop="newOrderAmount" label="新签金额"/>
      <el-table-column prop="rechargeAmount" label="续费金额"/>
      <el-table-column prop="actualAmount" label="新签金额"/>
    </el-table>

    <!--分页组件-->
    <div class="pg-wrapper">
      <el-pagination
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="sizeChange"
        @current-change="pageChange"/>
    </div>

  </div>
</template>

<script>
import initData from '@/mixins/initData'
import { formatDate } from '@/utils/index'

export default {
  mixins: [initData],
  data() {
    return {
      filters: {
        date: []
      },
      start: new Date(),
      end: new Date(),
      // 默认的类型，本周
      timeType: 1,
      listLoading: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  computed: {},
  mounted() {
    this.start = this.getFirstDayOfWeek(this.start)
    this.filters.date = [formatDate(this.start, 'yyyy-MM-dd'), formatDate(this.end, 'yyyy-MM-dd')]
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    formatDate,
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' ';
        } else {
          sums[index] = '';
        }
      });
      return sums;
    },
    beforeInit() {
      this.url = 'report/list'
      this.params = {
        page: this.page,
        size: this.size
      }
      if (this.filters.date != '' && this.filters.date != null) {
        this.params.date = this.filters.date.join(',')
      }
      return true
    },
    toQuery() {
      this.page = 1
      this.init()
    },
    switchType(type) {
      this.timeType = type;
      var that = new Date();
      if (type === 1) {
        this.start = this.getFirstDayOfWeek(that)
      } else if (type === 2) {
        this.start.setTime(that.getTime() - 3600 * 1000 * 24 * 30)
      } else if (type === 3) {
        this.start.setTime(that.getTime() - 3600 * 1000 * 24 * 90)
      }
      this.filters.date = [formatDate(this.start, 'yyyy-MM-dd'), formatDate(this.end, 'yyyy-MM-dd')]
      this.init()
    },
    getFirstDayOfWeek(date) {
      var weekday = date.getDay() || 7
      date.setDate(date.getDate() - weekday + 1)
      return date;
    },
    exportReport() {

    }
  }
}
</script>

<style scoped>
.el-button-group .active{
  color: #1890ff;
  border-color: #badeff;
  background-color: #e8f4ff;
}
</style>